<template>
  <div class="wrapper" ref="wrapper">
    <!-- 这里插槽外层需要再包裹一层 scroll规定 wrapper内只能有一个标签 更多内容写在content 里面 -->
    <div class="content">
      <!-- 这里预留的插槽 是为其他地方使用时传入的内容(需要滚动的内容) -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'Scroll',
  props: {
    probeType: {
      type: Number,
      // 给传入的 probeType 设置默认值0  不监听滚动
      default: 0
    },
    // 下拉加载
    pullUpLoad: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      scroll: null
    }
  },
  // 页面实例挂载完成后的钩子函数 此处创建 scroll 实例
  mounted () {
    // 此处推荐使用 ref获取元素信息 (不会和其他元素重复)
    // 第一步 创建 BScroll 对象
    this.scroll = new BScroll(this.$refs.wrapper, {
      // 设置类似div的元素 是否可以被点击 BetterScroll 默认会阻止浏览器的原生 click 事件
      click: true,
      // 开启 probeType 配置 需要根据使用者传来的数据为准 (有些时候调用不需要监听滚动)
      probeType: this.probeType,
      pullUpLoad: this.pullUpLoad
    })
    // 监听滚动的位置
    this.scroll.on('scroll', position => {
      // console.log(position)
      this.$emit('scroll', position)
    })
    // 上拉加载更多
    this.scroll.on('pullingUp', () => {
      this.$emit('pullingUp')
    })
  },
  methods: {
    // ES6 语法 设置 time默认值 直接等号赋值即可
    scrollTo (x, y, time = 500) {
      // 逻辑与 前面为false 后面不执行 (判断scroll是否有值)
      this.scroll && this.scroll.scrollTo && this.scroll.scrollTo(x, y, time)
    },
    // 封装finishPullUp() 方法 结束上一次的加载事件
    finishPullUp () {
      this.scroll.finishPullUp()
    },
    // scroll refresh()方法
    refresh () {
      this.scroll && this.scroll.refresh()
    },
    // 定义方法 返回坐标
    getScrollY () {
      return this.scroll.y ? this.scroll.y : 0
    }
  }
}
</script>

<style scoped>
</style>
